<template>
    <div class="app-container">
        <div>
            <div ref="chat111" class="chart" :style="{ height: '600px', width: '100%' }" />
        </div>


    </div>
</template>

<script>

import {getDeviceRecord}  from "@/api/system/device";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
    name: "device",
    data() {
        return {
            chart:null,
        }
    },

    methods: {
        initChart() {
            console.log("111")
            this.chart = echarts.init(this.$refs.chat111, "macarons");
            this.chart.showLoading({ text: "正在努力的读取数据中..." });
            let option = {
                title: {
                    text: '设备',
                    subtext: '设备运行记录(小时)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [],
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                ]
            };

            getDeviceRecord().then(res=>{
              
                option.legend.data=res.data.legend_data;
                option.xAxis[0].data=res.data.xAxis_data;
                
                let sss=[];
                for(let serie in res.data.series){
                   let se111={
                        name: serie,
                        type: 'bar',
                        data: res.data.series[serie],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    }
                    sss.push(se111);    
                }
                option.series=sss;
            this.chart.setOption(option);
            this.chart.hideLoading();
            })

          



        },
    },

    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },


}

</script>